<!--背单词页面-->
<template>
  <div>
    <h1>背单词</h1>
    <div >
      <ul class="word-list">

        <li class="word-item no-bullets">
          <span class="first-column">当前单词表 </span>
          <span class="second-column">{{ currentWordListFileName }}</span>
        </li>
        <li class="word-item  no-bullets">
          <span class="first-column">
          <label for="word-list-file-quiz" class="custom-file-button">
            <FontAwesomeIcon icon="folder" />选择单词表
          </label></span>
          <span class="second-column">
          <input type="file" id="word-list-file-quiz" @change="handleFileChange"  style="display: none;"/>
          </span>
        </li>
        <li class="word-item  no-bullets">
          <span class="first-column">单词数: </span>
          <span class="second-column">{{ wordCount }}</span>
        </li>
      </ul>
    </div>
    <ul>
      <li v-for="word in currentWordList" :key="word.word" :class="['card no-bullets', word.status] ">
        {{ word.word }} - {{ word.definition }} - {{ word.chineseDefinition }} - {{ word.phonetic }}
        <p> <button @click="markAsLearned(word.word)">
          <font-awesome-icon :icon="['fas', 'check']" />
        </button>
        <button @click="speakWord(word.word)">
          <font-awesome-icon :icon="['fas', 'volume-up']" />
        </button>
        <button @click="queryWord(word.word)" >
          <font-awesome-icon :icon="['fas', 'search']" />
        </button>
<!--        <button @click="$emit('edit-word', word.id)">-->
<!--          <font-awesome-icon :icon="['fas', 'edit']" />-->
<!--        </button>-->
        </p>
      </li>
    </ul>
  </div>
</template>
<script>
import { ref, computed, onMounted } from 'vue';
import { useStore ,mapActions } from 'vuex';
import { parseCsv } from '../store/utils'; // 引入 parseCsv 函数

export default {
  name: 'MemorizeView',
  setup() {
    const store = useStore();

    // 从 Vuex store 中获取当前单词表和文件名
    const currentWordList = computed(() => store.getters['wordList/getCurrentWordList']);
    const currentWordListFileName = computed(() => store.getters['wordList/getCurrentWordListFileName']);

    // 统计单词数量
    const wordCount = computed(() => currentWordList.value.length);

    // 处理文件选择事件
    const handleFileChange = (event) => {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          const text = e.target.result;
          const wordList = parseCsv(text);
          store.dispatch('wordList/changeWordList', { fileName: file.name, wordList });
        };
        reader.readAsText(file);
      }
    };

    // 组件挂载时加载默认单词表
    onMounted(() => {
      store.dispatch('wordList/loadDefaultWordList');
    });

    return {
      currentWordList,
      currentWordListFileName,
      wordCount,
      handleFileChange
    };
  },
  methods: {
    ...mapActions('wordList', [ 'updateWordStatus', 'fetchWordDetails' ]),
    markAsLearned(word) {
      this.updateWordStatus({ word, status: '已背过' });
    },
    queryWord(word) {
      this.fetchWordDetails(word);
    },

    speakWord(word) {
      // 使用全局变量 responsiveVoice
      if (typeof responsiveVoice !== 'undefined') {
        console.log('ResponsiveVoice is defined. Please check the script loading.',this.word );
        responsiveVoice.speak(word, "US English Female");
      } else {
        console.error('ResponsiveVoice is not defined. Please check the script loading.');
      }
    }
  }
};
</script>

<!--<style>-->
<!--li.生词 {-->
<!--  background-color: #f0f0f0;-->
<!--}-->
<!--li.已背过 {-->
<!--  background-color: #c6efce;-->
<!--}-->
<!--li.已学会 {-->
<!--  background-color: #ffeb9c;-->
<!--}-->
<!--li.待巩固 {-->
<!--  background-color: #ffc7ce;-->
<!--}-->
<!--</style>-->


<style scoped>
@import './styles.css';
</style>